import React from "react";
import {Form, Input, Button, Select, InputNumber, message} from 'antd';
import Authority from "./Authority";
import API from '../../api/api';
import './Role.css'

const { Option } = Select;
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};


export default class RoleForm extends React.Component {

    state={
        userType:"user"
    }

    permissions = [];
    formRef = React.createRef();

    onGenderChange = (value) => {
        this.setState({
            userType:value
        })
    };
    onFinish = (values) => {
        if(values.rolePermission==undefined || values.rolePermission.length==0){
            alert("未授权限")
        }else {
            let result = API.insertRole(values);
            if(result=="ok"){
                this.props.result('ok')
            }else if(result=="该角色已存在！"){
                alert("该角色名称已存在！")
            }
        }
    };
    onReset = () => {
        this.formRef.current.resetFields();
    };

    getPermissions=(permissions)=>{
        this.permissions = permissions;
    }

    render() {
        return (
            <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish} onReset={this.onReset}>
                <Form.Item
                    name="roleName"
                    label="角色名称"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="roleType"
                    label="角色类型"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        // placeholder="Select a option and change input text above"
                        onChange={this.onGenderChange}
                        allowClear
                    >
                        <Option value="manager">管理员</Option>
                        <Option value="user">用户</Option>
                    </Select>
                </Form.Item>
                {/*已經註銷*/}
                {/*<Form.Item*/}
                {/*    name={"roleSequence"}*/}
                {/*    label={"角色顺序"}*/}
                {/*    rules={[*/}
                {/*        {*/}
                {/*            type: 'number',*/}
                {/*            required: true,*/}
                {/*            min: 1,*/}
                {/*        }*/}
                {/*    ]}*/}
                {/*>*/}
                {/*    <InputNumber />*/}
                {/*</Form.Item>*/}
                <Form.Item
                    name={"roleDesc"}
                    label={"角色描述"}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name={"rolePermission"}
                    label={"角色权限"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Authority onChange={this.getPermissions} userType={this.state.userType}/>
                </Form.Item>

                <Form.Item
                    label="提交修改"
                    name="commit"
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}
